<template>
  <div>
    <a-form>

      <a-form-item label='上传多图片及显示历史记录'>

        <a-upload
          action="http://127.0.0.1:9527/file/uploadQCloud"
          :headers="headers"
          listType="picture"
          :defaultFileList="defaultFileList"
          @change="handleChange"
          class="upload-list-inline"
        >
          <a-button>
            <a-icon type="upload"/>
            upload
          </a-button>
        </a-upload>

      </a-form-item>


      <a-form-item label="上传单个图片文件">
        <a-upload
          name="avatar"
          listType="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"

          @change="handleChangeOne"
        >
          <img v-if="imageUrlOne" :src="imageUrlOne" alt="avatar"  style="width: 128px;height:128px"/>
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'"/>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>

      <a-form-item label="上传多张图片及显示历史记录2">


      </a-form-item>


      <a-form-item label="上传单个视屏或不需要缩略图文件">

        <a-upload action="http://127.0.0.1:9527/file/uploadQCloud" :headers="headers" @change="handleChangeFile">
          <a-button>
            <a-icon type="upload" /> Click to Upload
          </a-button>
        </a-upload>

      </a-form-item>



    </a-form>

  </div>
</template>
<script>
  import db from 'utils/localstorage'
  import AFormItem from "ant-design-vue/es/form/FormItem";

  export default {
    components: {AFormItem},
    name: 'UploadDemo',
    data() {
      return {
        defaultFileList: [],
        imageUrlOne: '',
        defaultFile: [],
        loading:false,
        headers: {
          Authentication: db.get('USER_TOKEN')
        },
        headers2: {
          authorization: 'authorization-text',
        }
      }
    },
    mounted() {
      this.fetch();
    },
    methods: {


      handleChange(info) {
        console.info("info", info)
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} ${info.file.response.message}`);
        }
      },
      getBase64(img, callback) {
        const reader = new FileReader()
        reader.addEventListener('load', () => callback(reader.result))
        reader.readAsDataURL(img)
      },
      handleChangeOne(info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          this.getBase64(info.file.originFileObj, (imageUrl) => {
            this.imageUrlOne = imageUrl
            this.loading = false
          })
        }
      },

      handleChangeFile(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },

      fetch() {
        this.$get('file', {}).then((r) => {
          var files = r.data.data;
          files.map((item) => {
            this.defaultFileList.push(item);
          })
        })
      }
      ,
    }
  }
</script>
<style scoped>
  /* tile uploaded pictures */
  .upload-list-inline > > > .ant-upload-list-item {
    float: left;
    width: 200px;
    margin-right: 8px;
  }

  .upload-list-inline > > > .ant-upload-animate-enter {
    animation-name: uploadAnimateInlineIn;
  }

  .upload-list-inline > > > .ant-upload-animate-leave {
    animation-name: uploadAnimateInlineOut;
  }

  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
